<template>
  <div class="page-warpper">
    <el-pagination @size-change="changeSize"
                   @current-change="changeCurrent"
                   :current-page="pageOpts.current"
                   :page-sizes="[10,20,30]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageOpts.count"
                   background />
  </div>
</template>
<script>
export default {
  props: {
    pageOpts: Object
  },
  data() {
    return {
      total: 20,
      current: 1
    };
  },
  methods: {
    changeSize(pageSize) {
      this.$emit("table-change", { ...this.pageOpts, pageSize });
    },
    changeCurrent(current) {
      this.$emit("table-change", { ...this.pageOpts, current });
    }
  }
};
</script>
<style lang="scss" scoped>
.page-warpper {
  padding: 25px;
}
</style>


